'use client'

import { useEffect, useState } from 'react'
import { useWindowScroll } from 'react-use'

export function useBarFloat() {
  // Header 是否“浮”在页面上方
  const [isFloat, setIsFloat] = useState(false)

  // 浏览器 Window 滚动距离
  const { y } = useWindowScroll()

  useEffect(() => {
    if (y > 32) {
      if (isFloat) return
      setIsFloat(true)
    } else {
      if (!isFloat) return
      setIsFloat(false)
    }
  }, [y, isFloat])

  return { isFloat }
}
